---
type: tutorial
title: Écrire votre premier article de blog en Markdown
description: |-
  Tutoriel : Créer votre premier blog avec Astro —
  Ajoutez des pages en Markdown à votre site
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro'
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

Maintenant que vous avez créé des pages à l'aide de fichiers `.astro`, il est temps de créer des articles de blog en utilisant des fichiers `.md` !

<PreCheck>
  - Créer un nouveau dossier et un nouvel article
  - Écrire un contenu en Markdown
  - Ajouter des liens vers vos articles de blog sur votre page Blog
</PreCheck>

## Créer votre premier fichier `.md`

<Steps>
1. Créez un nouveau répertoire `src/pages/posts/`. 

2. Ajoutez un nouveau fichier (vide) `post-1.md` à l'intérieur de votre nouveau dossier `/posts/`.

3. Accédez à cette page dans l'aperçu de votre navigateur en ajoutant `/posts/post-1` à la fin de votre URL de prévisualisation existante. (par exemple, `http://localhost:4321/posts/post-1`)

4. Modifiez l'URL de prévisualisation du navigateur pour afficher `/posts/post-2` à la place. (C'est une page que vous n'avez pas encore créée.) 

    Remarquez la différence d'affichage lors de la prévisualisation d'une page « vide » et d'une page qui n'existe pas. Cela vous aidera à résoudre des problèmes à l'avenir.
</Steps>

## Rédiger du contenu en Markdown

<Steps>
1. Copiez ou saisissez le code suivant dans `post-1.md`

    ```markdown title="src/pages/posts/post-1.md"
    ---
    title: 'Mon premier article de blog'
    pubDate: 2022-07-01
    description: "Il s'agit du premier article de mon nouveau blog Astro."
    author: 'Apprenti Astro'
    image:
        url: 'https://docs.astro.build/assets/rose.webp' 
        alt: "Le logo Astro sur un fond sombre avec une lueur rose."
    tags: ["astro", "blogging", "apprentissage en public"]
    ---
    # Mon premier article de blog

    Publié le : 2022-07-01

    Bienvenue sur mon _nouveau blog_ dédié à l'apprentissage d'Astro ! Ici, je vais partager mon parcours d'apprentissage en créant un nouveau site web.

    ## Ce que j'ai accompli

    1. **Installation d'Astro** : Tout d'abord, j'ai créé un nouveau projet Astro et configuré mes comptes en ligne.

    2. **Création de pages** : Ensuite, j'ai appris à créer des pages en créant de nouveaux fichiers `.astro` et en les plaçant dans le dossier `src/pages/`.

    3. **Création d'articles de blog** : C'est mon premier article de blog ! J'ai maintenant des pages Astro et des articles en Markdown !

    ## Ce qui vient ensuite

    Je vais terminer le tutoriel d'Astro, puis continuer à ajouter plus d'articles. Restez à l'écoute pour en savoir plus.
    ```

2. Vérifiez à nouveau l'aperçu de votre navigateur à l'adresse `http://localhost:4321/posts/post-1`. Vous devriez maintenant voir le contenu de cette page. Il n'est peut-être pas encore correctement formaté, mais ne vous inquiétez pas, vous le mettrez à jour plus tard dans le tutoriel !

3. Utilisez les outils de développement de votre navigateur pour inspecter cette page. Notez que même si vous n’avez utilisé aucun élément HTML, votre Markdown a été converti en HTML. Vous pouvez voir des éléments tels que des titres, des paragraphes et des éléments de liste.
</Steps>

:::note
Les informations en haut du fichier, à l'intérieur des délimiteurs de code, sont appelées « frontmatter ». Ces données, y compris les étiquettes (« tags ») et l'image de l'article, sont des informations *à propos de* votre article qu'Astro peut utiliser. Elles n'apparaissent pas automatiquement sur la page, mais nous y accéderons plus tard dans le tutoriel pour améliorer votre site. 
:::

## Ajouter des liens vers vos articles

<Steps>
1. Ajoutez un lien vers votre premier article avec une balise d'ancre dans `src/pages/blog.astro` :
    ```astro title="src/pages/blog.astro" ins={16-18}
    ---
    ---
    <html lang="fr">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
      </head>
      <body>
        <a href="/">Accueil</a>
        <a href="/about/">À propos</a>
        <a href="/blog/">Blog</a>

        <h1>Mon blog d'apprentissage d'Astro</h1>
        <p>Voici où je vais publier mon parcours d'apprentissage d'Astro.</p>
        <ul>
          <li><a href="/posts/post-1/">Article 1</a></li>
        </ul>
      </body>
    </html>
    ```

2. Ajoutez maintenant deux autres fichiers dans `src/pages/posts/` : `post-2.md` et `post-3.md`. Voici un exemple de code que vous pouvez copier-coller dans vos fichiers, ou vous pouvez créer le vôtre !

    ```md title="src/pages/posts/post-2.md"
    ---
    title: Mon deuxième article de blog
    author: Apprenti Astro
    description: "Après avoir appris Astro, je ne pouvais plus m'arrêter !"
    image: 
        url: "https://docs.astro.build/assets/arc.webp"
        alt: "Le logo Astro sur un fond sombre avec un arc de cercle dégradé violet."
    pubDate: 2022-07-08
    tags: ["astro", "blogging", "apprentissage en public", "réussites"]
    ---
    Après une première semaine réussie d'apprentissage d'Astro, j'ai décidé d'en faire un peu plus. J'ai écrit et importé un petit composant de mémoire !
    ```

    ```md title="src/pages/posts/post-3.md"
    ---
    title: Mon troisième article de blog
    author: Apprenti Astro
    description: "J'ai eu quelques défis, mais demander de l'aide à la communauté m'a vraiment aidé !"
    image: 
        url: "https://docs.astro.build/assets/rays.webp"
        alt: "Le logo Astro sur un fond sombre avec un arc de cercle dégradé violet."
    pubDate: 2022-07-15
    tags: ["astro", "apprentissage en public", "obstacles", "communauté"]
    ---
    Ce n'était pas toujours tout rose, mais j'adore créer avec Astro. Et, la [communauté Discord](https://astro.build/chat) est vraiment sympathique et serviable !
    ```

3. Ajoutez des liens vers ces nouveaux articles :

    ```astro title="src/pages/blog.astro" ins={18-19}
    ---
    ---
    <html lang="fr">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
      </head>
      <body>
        <a href="/">Accueil</a>
        <a href="/about/">À propos</a>
        <a href="/blog/">Blog</a>

        <h1>Mon blog d'apprentissage d'Astro</h1>
        <p>Voici où je vais publier mon parcours d'apprentissage d'Astro.</p>
        <ul>
          <li><a href="/posts/post-1/">Article 1</a></li>
          <li><a href="/posts/post-2/">Article 2</a></li>
          <li><a href="/posts/post-3/">Article 3</a></li>
        </ul>
      </body>
    </html>
    ```

4. Vérifiez l'aperçu de votre navigateur et assurez-vous que :

    Tous vos liens vers Article 1, Article 2 et Article 3 conduisent à une page fonctionnelle sur votre site. (Si vous trouvez une erreur, vérifiez vos liens dans `blog.astro` ou les noms de vos fichiers Markdown.)
</Steps>


<Box icon="question-mark">
### Tester vos connaissances

1. Le contenu d'un fichier Markdown (`.md`) est converti en :
    <MultipleChoice>
        <Option isCorrect>HTML</Option>
        <Option>CSS</Option>
        <Option>JavaScript</Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">
## Liste de contrôle

<Checklist>
- [ ] Je peux créer un nouveau dossier dans `src/pages/` pour mes articles de blog.
- [ ] Je peux créer un nouveau fichier d'article de blog en Markdown (`.md`).
- [ ] Je comprends que le Markdown est un autre langage qui, comme Astro, produit du HTML dans mon navigateur.
</Checklist>
</Box>

### Ressources

- [Aide-mémoire Markdown de The Markdown Guide](https://www.markdownguide.org/cheat-sheet/) (Anglais) <Badge class="neutral-badge" text="externe" />

- [Qu'est-ce que les outils de développement du navigateur ? MDN](https://developer.mozilla.org/fr/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools) <Badge class="neutral-badge" text="externe" />

- [Front Matter YAML](https://assemble.io/docs/YAML-front-matter.html) (Anglais) <Badge class="neutral-badge" text="externe" />
